<template>
	<view class="approve">
		<view class="steps">
			<view class="stepsBox">
				<u-steps :current="current" dot>
					<u-steps-item :title="item.name" v-for="item in nodeIndex" :key="item.id"></u-steps-item>
				</u-steps>
			</view>
		</view>
		<view class="detailTitle">
			<view :class="[isClick === '审批' ? 'active' :'','shenpi']" @click="swichTitle('审批')">
				<text>审批</text>
			</view>
			<view :class="[isClick === '审批记录' ? 'active' :'','jilu']" @click="swichTitle('审批记录')">
				<text>审批记录</text>
			</view>
			<view :class="[isClick === '内容' ? 'active' :'','neirong']" @click="swichTitle('内容')">
				<text>内容</text>
			</view>
		</view>
		<view class="detailJilu" v-if="isClick === '审批记录'">
			<view class="" v-if="noteList.length > 0">
				<u-steps current="1" direction="column" v-for="item in noteList" :key="item.id">
					<u-steps-item :title="item.add_time">
						<view class="descContent" slot="desc">
							<view class="title">
								{{item.flow_type_val}}
							</view>
							<view class="pFont">
								<text>审批类型：</text><text class="textC text">{{item.flow_id_val}}</text>
								<text>审批节点：</text><text class="textC">{{item.flow_node_id_val}}</text>
							</view>
							<view class="pFont">
								<text>审批人：</text><text class="textC text">{{item.worker_id_val}}</text>
								<text>审批结果：</text><text class="text testTag">
									<u-tag :text="items[item.approval_result].label"
										:type="items[item.approval_result].type"></u-tag>
								</text>
							</view>
							<view class="pFont">
								<text>备注：{{item.memo}}</text>
							</view>
						</view>
					</u-steps-item>
				</u-steps>
			</view>
			<view style="text-align: center;padding-bottom: 50px;" v-else>
				<image src="../../static/img/nullData.png" style="width: 160px;height: 160px;"></image>
				<view class="">
					暂无记录
				</view>
			</view>
		</view>
		<view class="content" v-if="isClick === '内容'">
			<view class="conT">
				<u-icon name="bookmark-fill" color="#2979ff" size="40"
					style="display: inline-block;    vertical-align: middle;"></u-icon>
				内容
			</view>
			<view class="contentBox">
				<u-cell-group>
					<u-cell :title="item.title" :value="item.value" v-for="(item,i) in content" :key="i"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="shenpiSub" v-if="isClick === '审批'">
			<u-row>
				<u-col span="2">
					<text>审批</text>
				</u-col>
				<u-col span="4">
					<u-radio-group v-model="agree" placement="row" size="40" iconSize="40">
						<u-radio shape="circle" label="同意" name="1" labelSize="30" style="margin-right: 15px;">
						</u-radio>
						<u-radio shape="circle" label="不同意" name="0" labelSize="30"></u-radio>
					</u-radio-group>
				</u-col>
			</u-row>
			<view class="apMargin">
				<u-row class="">
					<u-col span="3">
						<text>审批意见</text>
					</u-col>
					<u-col span="9">
						<u--textarea v-model="memo" placeholder="请输入内容"></u--textarea>
					</u-col>
				</u-row>
			</view>
			<u-row gutter="50">
				<u-col span="6">
					<u-button type="primary" text="确定" @click="submit()"></u-button>
				</u-col>
				<u-col span="6">
					<u-button text="取消"></u-button>
				</u-col>
			</u-row>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getNodeLog,
		getNodeIndex,
		agreeApply,
		refuseApply
	} from "../../api/flow.js"
	export default {
		data() {
			return {
				flow_log_id: '',
				isClick: '审批',
				noteList: [],
				items: [{
						type: '',
						label: ''
					},
					{
						type: 'success',
						label: '同意'
					},
					{
						type: 'danger',
						label: '拒绝'
					},
					{
						type: 'warning',
						label: '退回'
					},
				],
				content: [{
						title: '类型',
						value: 'test审批'
					},
					{
						title: '客户',
						value: '通定一分部'
					},
					{
						title: '额度',
						value: '123'
					},
					{
						title: '备注',
						value: '456'
					},
				],
				flow_id: '',
				nodeIndex: [],
				flow_node_id: '',
				current: '0',
				agree: '1',
				memo: ''
			}
		},
		onLoad(option) {
			this.flow_log_id = option.flow_log_id
			this.flow_id = option.flow_id
			this.flow_node_id = option.flow_node_id
		},
		mounted() {
			this.getNodeList();
			this.getNodeIndex();
		},
		methods: {
			swichTitle(title) {
				this.isClick = title
			},
			getNodeList() {
				getNodeLog({
					flow_log_id: this.flow_log_id
				}).then(res => {
					if (res.data.code === 1) {
						this.noteList = res.data.data
					}
				})
			},
			getNodeIndex() {
				getNodeIndex({
					flow_id: this.flow_id
				}).then(res => {
					if (res.data.code === 1) {
						res.data.data.unshift({
							id: '0',
							name: '提交审批'
						})
						this.nodeIndex = res.data.data
						this.nodeIndex.forEach((ele, i) => {
							if (ele.id === this.flow_node_id) {
								this.current = i
							}
						})
					}
				})
			},
			submit() {
				const obj = {
					flow_log_id: this.flow_log_id,
					memo: this.memo,
				}
				console.log(this.agree)
				if (this.agree === '1') {
					agreeApply(obj).then((res) => {
						if (res.data.code === 1) {
							this.$refs.uToast.show({
								type: 'success',
								icon: false,
								title: '提示',
								message: res.data.msg,
							});
							uni.navigateTo({
								url: `/pages/manage/waitMyApply`
							});
						}
					})
				} else if (this.agree === '0') {
					refuseApply(obj).then((res) => {
						if (res.data.code === 1) {
							this.$refs.uToast.show({
								type: 'success',
								icon: false,
								title: '提示',
								message: res.data.msg,
							});
							uni.navigateTo({
								url: `/pages/manage/waitMyApply`
							});
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.approve {
		width: 100%;
		height: 100%;
		background-color: rgba(249, 249, 249, 1);

		.content {
			.contentBox {
				background-color: #fff;
			}

			.conT {
				width: 95%;
				margin: 0 auto;
				padding: 15px 0;
			}
		}

		.steps {
			width: 100%;
			background-color: #fff;
			padding: 20px 0;
			border-bottom: 1px solid rgb(242, 242, 242);

			.stepsBox {
				width: 95%;
				margin: 0 auto;
				font-size: 17px;
				color: rgb(153, 153, 153);
			}
			.u-text__value {
				font-size: 24rpx!important;
			}
		}

		.detailTitle {
			width: 100%;
			font-size: 14px;
			margin-top: 15px;

			.jilu,
			.neirong,
			.shenpi {
				width: 32.5%;
				display: inline-block;
				text-align: center;
				padding: 10px 0;
				color: rgb(52, 120, 247);
				border-width: 1px;
				border-style: solid;
				border-color: rgb(0, 121, 254);
			}

			.shenpi {
				border-radius: 5px 0px 0px 5px;
			}

			.jilu {
				border-right: none;
				border-left: none;
			}

			.neirong {
				border-radius: 0px 5px 5px 0px;
			}

			.active {
				background-color: rgb(52, 120, 247);
				color: #fff;
			}
		}

		.detailJilu {
			width: 90%;
			margin: 0 auto;
			margin-top: 15px;

			.descContent {
				width: 90%;
				margin: 0 auto;
				padding: 15px;
				font-size: 14px;
				background-color: #fff;
				border: 1px solid #ebeef5;
				border-radius: 5px;
				background-color: #fff;
				-moz-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

				view {
					padding: 5px 0;
				}

				.title {
					font-size: 15px;
					font-weight: bold;
				}

				.textC {
					color: #606266;
				}

				.text {
					margin-right: 15px;
				}

				.pFont {
					font-size: 13px;
				}

				.testTag {
					display: inline-block;
					width: 26%;
				}
			}
		}

		.shenpiSub {
			width: 90%;
			margin: 0 auto;
			margin-top: 15px;
			.apMargin{
				margin: 40rpx 0;
			}
		}
	}
</style>
<style>
	.approve .u-text__value span {
		font-size: 24rpx
	}
</style>
